<template>

  <view class="codefun-flex-col page">
    <view class="codefun-flex-row codefun-items-end group">
      <view class="codefun-flex-col codefun-items-center group_2">
        <text class="font_1">笔</text>
        <text class="font_1">记</text>
        <text class="font_1">类</text>
        <text class="font_1">型</text>
      </view>
      <picker class="codefun-flex-row codefun-items-center choose space-x-26" @change="chooseChange()" mode="selector"  :range="tagList">
			<text class="text">{{select}}</text>
			<image
			  class="codefun-shrink-0 image"
			  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64979aaa5a7e3f03109285bc/649cf90f726ab50011f4229a/16880089807104218746.png"
			/>	 
      </picker>
      <view class="codefun-flex-col codefun-items-start group_3 space-y-8">
        <text class="text_2">笔记数量：3</text>
        <image
          class="image_2"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64979aaa5a7e3f03109285bc/649cf90f726ab50011f4229a/16880089807072185986.png"
        />
      </view>
    </view>
    <view class="codefun-flex-col list space-y-14">
      <view class="codefun-flex-col list-item" v-for='(item,index) in notes' :key="index" @click="navigateToNoteEdit(item)">
        <mynote :noteList='item'></mynote>
    </view>
    
  </view>
  <view @click="addNote" class='addNote'>
  	<image
  	  class="codefun-self-end image_4"
  	  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64979aaa5a7e3f03109285bc/649cf90f726ab50011f4229a/16880089807046809332.png"
  	/>
  </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {   

      	tagList:["日常","5w1h","swto"],
      	select:'',
		userid:2,
		notes:[],
      	noteMessage:[
      		{
      				mess:"今天天气很好",
      				time:"2023/6/24",
      				tag:["校园","情感"]
      			},
      			{
      				mess:"明天我要写代码",
      				time:"2023/6/23",
      				tag:["工作","摸鱼","带薪"]
      			}
      		],
      		noteNormalNote:{},
      		noteNormalTag:{}
      }
    },
    onLoad(e) {
			let that = this

			uni.request({
				url: '/note/getNoteByUserId/' + this.userid,
				method: 'GET',

				success: (res) => {
					console.log("主页"+res.data)
					that.notes=res.data
				}
			})
			
		},				
onShow() {
			// id
			const id = uni.getStorageSync('userid')
			console.log(id);
			uni.removeStorageSync('userid') // 清除已使用的参数
		},
    methods: {
		chooseChange(e){
				this.select=this.tagList[e.mp.detail]

			},
			navigateToNoteEdit(item) {
				const noteMess = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: "../../pages/noteEdit/noteEdit?noteMess=" + noteMess
				});
			},
			addNote() {
				uni.navigateTo({
					url: "../../pages/chooseNoteStyle/chooseNoteStyle"
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 55.81rpx 34.88rpx 251.16rpx;
		background-image: linear-gradient(0deg, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding: 0 3.49rpx;

			.group_2 {
				margin-top: 6rpx;

				.font_1 {
					font-size: 19rpx;
					font-family: AlimamaShuHeiTi;
					line-height: 20.93rpx;
					color: #695af2f5;
				}
			}

			.choose {
				margin-left: 8.72rpx;
				padding: 20.93rpx 27.91rpx 24.42rpx;
				background-color: #b1a9fcf5;
				border-radius: 20.93rpx;
				height: 45.95rpx;
				width: 150rpx;
				border: solid 5.23rpx #7869fff5;

				.text {
					margin-left: 10rpx;
					color: #f1f0fcf5;
					font-size: 38.37rpx;
					font-family: AlimamaShuHeiTi;
					line-height: 35.76rpx;
				}

				.image {
					margin-left: 30rpx;
					width: 27.91rpx;
					height: 27.91rpx;
				}
			}

			.space-x-26 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 45.35rpx;
				}
			}

			.group_3 {
				margin-left: 20.93rpx;
				margin-bottom: 3.49rpx;
				width: 335.76rpx;

				.text_2 {
					margin-left: 10.47rpx;
					color: #afa6fff5;
					font-size: 27.91rpx;
					font-family: AlimamaShuHeiTi;
					line-height: 26.16rpx;
				}

				.image_2 {
					width: 181.4rpx;
					height: 5.23rpx;
				}
			}

			.space-y-8 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 13.95rpx;
				}
			}
		}

		.list {
			margin-top: 59.3rpx;

			.list-item {
				padding: 24.42rpx 20.93rpx 31.4rpx;
				background-color: #fbfafff5;
				border-radius: 17.44rpx;
				border: solid 10.47rpx #abb9fff5;

				.group_4 {
					margin-left: 6.98rpx;

					.font_2 {
						font-size: 59.3rpx;
						font-family: SourceHanSansCN;
						line-height: 71.51rpx;
						color: #564aba;
					}

					.image_3 {
						width: 108.14rpx;
						height: 108.14rpx;
					}
				}

				.font_3 {
					font-size: 24.42rpx;
					font-family: SourceHanSansCN;
					line-height: 24.42rpx;
					color: #7e77b8;
				}

				.text_3 {
					margin-left: 20.93rpx;
					margin-top: 17.44rpx;
				}

				.section_2 {
					margin-top: 13.95rpx;
					background-color: #adbbfe;
					width: 542.44rpx;
					height: 6.98rpx;
				}

				.font_4 {
					font-size: 24.42rpx;
					font-family: SourceHanSansCN;
					line-height: 18.31rpx;
					color: #7e77b8;
				}

				.text_4 {
					margin-left: 17.44rpx;
					margin-top: 27.91rpx;
				}
			}
		}

		.space-y-14 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 24.42rpx;
			}
		}

		.image_4 {
			margin-top: 320.93rpx;
			width: 129.07rpx;
			height: 123.84rpx;
		}
	}
</style>